<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-19 10:11:07
 * @LastEditors: charles
 * @LastEditTime: 2021-12-19 10:11:08
-->
<template>
  <div>

    <!-- 导航栏 -->
    <div class="nav">

      <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal"
        @select="handleSelect" background-color="#545c64" text-color="#fff"
        active-text-color="#ffd04b" unique-opened>
        <el-menu-item index="1">学校概况</el-menu-item>
        <el-menu-item index="2">教务信息</el-menu-item>
        <el-menu-item index="3">选课系统</el-menu-item>
        <el-menu-item index="4">师资队伍</el-menu-item>

      </el-menu>
    </div>

    <!-- 师资队伍 -->
    <div v-show="show==4">
      <div style="text-align:center;">
        <div class="biaoti">中国科学院院士</div>
      </div>

      <!-- img盒子 -->
      <div class="list">
        <div class="item">
          <a href="#">
            <div class="pic">
              <img src="../../../assets/teachers/1.jpg">
            </div>
            <div class="h">姜伯驹</div>
          </a>
        </div>
        <div class="item">
          <a href="#">
            <div class="pic">
              <img src="../../../assets/teachers/2.jpg">
            </div>
            <div class="h">姜伯驹</div>
          </a>
        </div>
        <div class="item">
          <a href="#">
            <div class="pic">
              <img src="../../../assets/teachers/3.jpg">
            </div>
            <div class="h">姜伯驹</div>
          </a>
        </div>
        <div class="item">
          <a href="#">
            <div class="pic">
              <img src="../../../assets/teachers/4.jpg">
            </div>
            <div class="h">姜伯驹</div>
          </a>
        </div>
        <div class="item">
          <a href="#">
            <div class="pic">
              <img src="../../../assets/teachers/5.jpg">
            </div>
            <div class="h">姜伯驹</div>
          </a>
        </div>
        <div class="item">
          <a href="#">
            <div class="pic">
              <img src="../../../assets/teachers/6.jpg">
            </div>
            <div class="h">姜伯驹</div>
          </a>
        </div>
        <div class="item">
          <a href="#">
            <div class="pic">
              <img src="../../../assets/teachers/7.jpg">
            </div>
            <div class="h">姜伯驹</div>
          </a>
        </div>
        <div class="item">
          <a href="#">
            <div class="pic">
              <img src="../../../assets/teachers/8.jpg">
            </div>
            <div class="h">姜伯驹</div>
          </a>
        </div>
      </div>

      <!-- 回到顶部 -->
      <el-backtop></el-backtop>
    </div>

    <!-- 选课系统 -->
    <div v-show="show ==2" class="table" style="height=250px; width=100%;">
      <el-table :data="tableData" height="285" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="类型" width="180">
        </el-table-column>
        <el-table-column prop="address" label="内容">
        </el-table-column>
      </el-table>
    </div>
    <!-- 教务信息 -->
    <div v-show="show == 3">
      <el-row>
        <!-- 左边 -->
        <el-col :span="12">
          <div>
            <el-transfer v-model="value" :data="data" :titles="title"></el-transfer>
          </div>
        </el-col>
        <!-- 右边 -->
        <el-col :span="12">
          <div class="r">
            <el-table :data="tableData1" height="285" border style="width: 100%">
              <el-table-column prop="date" label="课程名称" width="180">
              </el-table-column>
              <el-table-column prop="name" label="授课老师" width="180">
              </el-table-column>
              <el-table-column prop="address" label="学时">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 学校概况 -->
    <div v-show="show == 1">
      <el-carousel :interval="4000" type="card" height="288px">
        <el-carousel-item v-for="item in 8" :key="item">
          <h3 class="medium"></h3>
        </el-carousel-item>
      </el-carousel>

    </div>

  </div>
</template>

<script>
export default {
    data() {
        const generateData = (_) => {
            const data = []
            const courses = [
                '计算机程序设计基础',
                '数据结构',
                '操作系统',
                '计算机组成原理',
                '计算机网络',
                '数据库系统原理及应用',
                'Java实用教程',
            ]
            const index = ['1', '2', '3', '4', '5', '6', '7']
            courses.forEach((course, index) => {
                data.push({
                    label: course,
                    key: index,
                    index: index[index],
                })
            })
            return data
        }
        return {
            //选课标题
            title: ['课程列表', '已选课程'],
            //选课数据源
            data: generateData(),
            value: [],
            //用来决定显示哪个div
            show: 1,
            activeIndex: '1',
            tableData: [
                {
                    date: '	2023/2/10 14:56:49',
                    name: '通知',
                    address: '关于开展2023年上半年普通话测试工作的通知 ',
                },
                {
                    date: '	2023/2/10 14:55:11',
                    name: '通知',
                    address: '关于2023年上半年全国计算机等级考试报名工作的通知',
                },
                {
                    date: '	2022/9/28 14:41:26',
                    name: '通知',
                    address: '	关于建立2022级学生图像信息库及办理考籍证工作的通知 ',
                },
                {
                    date: '	2022/9/9 15:57:54',
                    name: '通知',
                    address: '	湘南学院关于2022年下半年全国大学英语四、六级考试报名工作的通知',
                },
                {
                    date: '	2022/8/26 17:07:33',
                    name: '通知',
                    address: '关于2022年下半年全国计算机等级考试报名工作的通知',
                },
                {
                    date: '	2022/3/14 9:57:40',
                    name: '通知',
                    address: '	关于2022年上半年全国大学英语四、六级考试报名工作的通知',
                },
                {
                    date: '	2022/2/22 16:08:22',
                    name: '通知',
                    address: '关于开展2022年上期普通话测试工作的通知',
                },
                {
                    date: '	2021/12/29 15:22:23',
                    name: '通知',
                    address: '关于2022年上半年全国计算机等级考试报名工作的通知 ',
                },
                {
                    date: '	2021/9/16 18:01:37',
                    name: '通知',
                    address: '	关于2021年下半年全国大学英语四、六级考试报名工作的通知 ',
                },
                {
                    date: '	2021/6/24 14:59:31',
                    name: '通知',
                    address: '关于2021年下半年全国计算机等级考试报名工作的通知 ',
                },
                {
                    date: '	2021/3/16 15:46:43',
                    name: '通知',
                    address: '关于2021年上半年全国大学英语四、六级考试报名工作的通知',
                },
                {
                    date: '	2021/3/15 9:54:15',
                    name: '通知',
                    address: '关于开展2021年上期普通话测试工作的通知 ',
                },
                {
                    date: '	2021/1/6 16:15:18',
                    name: '通知',
                    address: '	关于2021年上半年全国计算机等级考试报名工作的通知',
                },
            ],
            tableData1: [
                {
                    date: '计算机程序设计基础',
                    name: '吴伟民',
                    address: '18',
                },
                {
                    date: '数据结构',
                    name: '严蔚敏',
                    address: '19',
                },
                {
                    date: '操作系统',
                    name: '白中英',
                    address: '18',
                },
                {
                    date: '计算机组成原理',
                    name: '戴志涛',
                    address: '21',
                },
                {
                    date: '计算机网络',
                    name: '谢希仁',
                    address: '19',
                },
                {
                    date: '数据库系统原理及应用',
                    name: '苗雪兰',
                    address: '21',
                },
                {
                    date: 'Java实用教程',
                    name: '刘瑞新',
                    address: '23',
                },
            ],
        }
    },

    methods: {
        handleSelect(key, keyPath) {
            // console.log(key)
            switch (key) {
                case '1':
                    // console.log('hello')
                    this.show = 1
                    break
                case '2':
                    // console.log('world')
                    this.show = 2
                    break
                case '3':
                    this.show = 3
                    break
                case '4':
                    this.show = 4
                    break
                default:
                    break
            }
        },
    },

    mouted() {},
}
</script>

<style>
.h {
    line-height: 1.3;
}
.item .h {
    font-size: 18px;
    margin-top: 10px;
    text-align: center;
}
.item img {
    width: 100%;
    height: auto;
}

img {
    border: none;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
}

.item .pic {
    border-bottom: 4px solid #876e6a;
    position: relative;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
}

.item {
    width: calc(25% - 31px);
    margin-left: 40px;
    margin-bottom: 30px;
}

.item:nth-child(4n-3) {
    margin-left: 0;
}

.list {
    margin: 50px 5% 0;
    display: flex;
    flex-wrap: wrap;
}

.biaoti {
    margin: 20px;
    font-size: 40px;
    line-height: 1.4;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(8n) {
    background-color: #99a9bf;
    background-image: url('../../../assets/img/1.jpg');
}

.el-carousel__item:nth-child(8n + 1) {
    background-color: #99a9bf;
    background-image: url('../../../assets/img/2.jpg');
}

.el-carousel__item:nth-child(8n + 2) {
    background-color: #99a9bf;
    background-image: url('../../../assets/img/3.jpg');
}
.el-carousel__item:nth-child(8n + 3) {
    background-color: #99a9bf;
    background-image: url('../../../assets/img/4.jpg');
}

.el-carousel__item:nth-child(8n + 4) {
    background-color: #99a9bf;
    background-image: url('../../../assets/img/5.jpg');
}

.el-carousel__item:nth-child(8n + 5) {
    background-color: #99a9bf;
    background-image: url('../../../assets/img/6.jpg');
}

.el-carousel__item:nth-child(8n + 6) {
    background-color: #99a9bf;
    background-image: url('../../../assets/img/7.jpg');
}

.el-carousel__item:nth-child(8n + 7) {
    background-color: #99a9bf;
    background-image: url('../../../assets/img/8.jpg');
}

.r {
    height: 286px;
    width: 640px;
}
</style> 